<template>
  <div class="edit-product-page">
    <a-card title="修改商品" class="product-card">
      <a-form @submit.prevent="handleSubmit" layout="vertical">
        <a-form-item label="上传商品图片">
          <a-upload name="image" list-type="picture" :before-upload="beforeUpload" :on-change="handleImageChange">
            <a-button>
              <a-icon type="upload" /> 点击上传
            </a-button>
          </a-upload>
        </a-form-item>

        <a-form-item label="商品名称">
          <a-input v-model:value="product.prodName" placeholder="请输入商品名称" />
        </a-form-item>

        <a-form-item label="商品描述">
          <a-textarea v-model:value="product.prodCaption" placeholder="请输入商品描述" rows="4" allow-clear />
        </a-form-item>

        <a-form-item label="商品价格">
          <a-input-number v-model:value="product.prodPrice" min="0" placeholder="请输入商品价格" style="width: 100%" />
        </a-form-item>

        <a-form-item label="商品库存">
          <a-input-number v-model:value="product.prodCount" min="0" placeholder="请输入商品库存" style="width: 100%" />
        </a-form-item>

        <a-form-item>
          <a-button type="primary" html-type="submit">确定</a-button>
          <a-button style="margin-left: 8px;" @click="handleCancel">取消</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
import request from '../../../util/request';

const router = useRouter();

const route = useRoute();

const product = ref({
  prodName: '',
  prodCaption: '',
  prodPrice: null,
  prodCount: null,
  // prodPicture: null,
});

const fetchProductData = () => {
  // 模拟 API 调用获取商品数据
  const productId = route.query.prodId; // 假设通过路由参数获取商品 ID
  console.log('获取到的商品ID:', productId);
  // 这里可以替换为实际的 API 调用
  request.post('/product/get', {
    prodid: productId,
  }).then(res => {
    product.value = res.data.product;
  }).catch(err => {
    message.error('获取商品信息失败' + err);
  });
};

onMounted(() => {
  fetchProductData(); // 页面加载时获取商品数据
});

const beforeUpload = (file) => {
  const isImage = file.type.startsWith('image/');
  if (!isImage) {
    message.error('只能上传图片文件!');
  }
  return isImage;
};

const handleImageChange = (info) => {
  // if (info.file.status === 'done') {
  //   product.value.prodPicture = info.file.response.url; // 假设后端返回图片 URL
  // }
  console.log('该功能未建设完成');
  console.log('info:', info);
  message.success(`${info.file.name} 上传成功`);
};

const handleSubmit = () => {
  //console.log('提交的商品信息:', product.value);
  // 这里可以添加 API 调用逻辑以保存修改后的商品信息
  request.post('/product/edit', {
    ...product.value,
    prodid: route.query.prodId,
    busid: sessionStorage.getItem('userid'),
  }).then(res => {
    if(res.data.flag === 'success') {
      message.success('商品修改成功');
      router.push('/business/myProd'); // 假设返回商品列表页面
    } else {
      message.error('商品修改失败, 请稍后重试或联系管理员');
    }
  }).catch(err => {
    message.error('商品修改失败' + err);
  });
};

const handleCancel = () => {
  router.push('/business/myProd');
}
</script>

<style scoped>
.edit-product-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  /* 使卡片垂直居中 */
}

.product-card {
  width: 400px;
  /* 设置卡片宽度 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>